<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Awesome-笔记</title>
    <meta name="generator" content="VuePress 1.9.10">
    <link rel="icon" href="icons/favicon.ico">
    <meta name="description" content="">
    <meta name="author" content="热爱生活，喜欢睡觉">
    <meta name="about" content="这是一个专门用于记录笔记的静态资源网站">
    
    <link rel="preload" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css" as="style"><link rel="preload" href="/awesome-notebook/assets/js/app.5520c9b0.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/2.778bb4ad.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/1.50b457b8.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/26.9422829f.js" as="script"><link rel="prefetch" href="/awesome-notebook/assets/js/10.325b9f09.js"><link rel="prefetch" href="/awesome-notebook/assets/js/11.c62b6b34.js"><link rel="prefetch" href="/awesome-notebook/assets/js/12.ecdb524b.js"><link rel="prefetch" href="/awesome-notebook/assets/js/13.3f3f6a36.js"><link rel="prefetch" href="/awesome-notebook/assets/js/14.eb7a3d07.js"><link rel="prefetch" href="/awesome-notebook/assets/js/15.114dfd5c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/16.85253907.js"><link rel="prefetch" href="/awesome-notebook/assets/js/17.c2838453.js"><link rel="prefetch" href="/awesome-notebook/assets/js/18.3256f17f.js"><link rel="prefetch" href="/awesome-notebook/assets/js/19.d8afd0ae.js"><link rel="prefetch" href="/awesome-notebook/assets/js/20.10e47ab9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/21.33b300c9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/22.b7c97fbe.js"><link rel="prefetch" href="/awesome-notebook/assets/js/23.e9994ecc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/24.8cc3e1e8.js"><link rel="prefetch" href="/awesome-notebook/assets/js/25.dedb1585.js"><link rel="prefetch" href="/awesome-notebook/assets/js/27.9802cd87.js"><link rel="prefetch" href="/awesome-notebook/assets/js/28.d9f287bc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/29.dc9b14bd.js"><link rel="prefetch" href="/awesome-notebook/assets/js/3.af33e5d6.js"><link rel="prefetch" href="/awesome-notebook/assets/js/30.645d0efa.js"><link rel="prefetch" href="/awesome-notebook/assets/js/31.164808cf.js"><link rel="prefetch" href="/awesome-notebook/assets/js/32.59287e4c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/33.3031be3e.js"><link rel="prefetch" href="/awesome-notebook/assets/js/34.4ce6ff0d.js"><link rel="prefetch" href="/awesome-notebook/assets/js/35.d58eebcc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/4.45665f8a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/5.7098d77a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/6.0c0a0f39.js"><link rel="prefetch" href="/awesome-notebook/assets/js/7.6a854e57.js"><link rel="prefetch" href="/awesome-notebook/assets/js/vendors~docsearch.5e19b665.js">
    <link rel="stylesheet" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/awesome-notebook/" class="home-link router-link-active"><img src="/awesome-notebook/imgs/hero.png" alt="Awesome-笔记" class="logo"> <span class="site-name can-hide">Awesome-笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span></span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#html-dom" class="sidebar-link">HTML DOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#dom-方法" class="sidebar-link">DOM 方法</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#属性" class="sidebar-link">属性</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#为一个-dom-添加事件的方法" class="sidebar-link">为一个 DOM 添加事件的方法</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#js-中特殊的赋值" class="sidebar-link">js 中特殊的赋值</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#js-计时事件" class="sidebar-link">js 计时事件</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#jquery-异步请求" class="sidebar-link">jquery 异步请求</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#css3-transition-动画" class="sidebar-link">css3-transition 动画</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#html-canvas-对象" class="sidebar-link">HTML canvas 对象</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#一些杂项" class="sidebar-link">一些杂项</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#null-与-undefined-联系与区别" class="sidebar-link">null 与 undefined 联系与区别</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#typeof-、instanceof" class="sidebar-link">typeof 、instanceof</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#js-中的基本和引用数据类型" class="sidebar-link">js 中的基本和引用数据类型</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#同步异步及代码执行顺序" class="sidebar-link">同步异步及代码执行顺序</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#let、var、const" class="sidebar-link">let、var、const</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#解构、赋值、展开" class="sidebar-link">解构、赋值、展开</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#函数相关" class="sidebar-link">函数相关</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#形参与实参" class="sidebar-link">形参与实参</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#箭头函数与-this-指向" class="sidebar-link">箭头函数与 this 指向</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#类与继承" class="sidebar-link">类与继承</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#类的继承" class="sidebar-link">类的继承</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#原型链的理解" class="sidebar-link">原型链的理解</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#原型对象" class="sidebar-link">原型对象</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#闭包" class="sidebar-link">闭包</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#js-内存结构与深浅拷贝" class="sidebar-link">js 内存结构与深浅拷贝</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#浅拷贝" class="sidebar-link">浅拷贝</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#json-对象深拷贝" class="sidebar-link">JSON 对象深拷贝</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#回调地狱与-promise-对象" class="sidebar-link">回调地狱与 Promise 对象</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#异步请求" class="sidebar-link">异步请求</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js_knowledge_1.html#xmlhttpreauest-对象及其封装" class="sidebar-link">XMLHttpReauest 对象及其封装</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>js 隐藏 dom 元素方法</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 设置display属性</span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;elementId&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//使用visibility属性,隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。</span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;elementId&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>visibility <span class="token operator">=</span> <span class="token string">&quot;hidden&quot;</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="删除-dom-元素方法"><a href="#删除-dom-元素方法" class="header-anchor">#</a> 删除 dom 元素方法</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//找到待删除的节点的父节点</span>
<span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;myElement&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
element<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//直接调用节点的remove方法</span>
<span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;myElement&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
element<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//将父节点的innerHTML属性赋值为空字符串</span>
<span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;myElement&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
element<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="html-dom"><a href="#html-dom" class="header-anchor">#</a> HTML DOM</h2> <p>当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。也是 Window 对象的一部分，可通过 window.document 属性对其进行访问。</p> <h3 id="dom-方法"><a href="#dom-方法" class="header-anchor">#</a> DOM 方法</h3> <p>查
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName()
getElementsByClassName()</p> <p>document.querySelector() 返回匹配指定 CSS 选择器元素的第一个子元素
document.querySelectorAll()</p> <p>getAttribute(attributename) 方法通过名称获取属性的值。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//html      &lt;a href=&quot;&quot; target=&quot;_blank&quot;&gt;这是一个demo&lt;/a&gt;</span>
<span class="token comment">//返回值类型：字符串</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;demo&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">&quot;target&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//_blank</span>
</code></pre></div><p>增
appendChild() 把新的子节点添加到指定节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点
删</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//创建li列表DOM结点</span>
<span class="token keyword">let</span> li <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;li&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//父节点调用appendChild方法，将新DOM结点变为自己的子结点</span>
element<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>li<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>removeChild() 删除子节点。
插
insertBefore() 在指定的子节点前面插入新的子节点。</p> <h4 id="addeventlistener-方法"><a href="#addeventlistener-方法" class="header-anchor">#</a> addEventListener()方法</h4> <p>addEventListener() 添加事件监听器，并在合适时候执行对应的回调函数
语法：<code>element.addEventListener(event, function, useCapture)</code></p> <blockquote><p>event:HTML 事件属性(见菜鸟教程)，如 click，focus，input，
function:要绑定的事件处理函数，默认向该回调传递一个 window.event 作为参数
useCapture:布尔值：事件冒泡 false（内部事件先被触发）或事件捕获 true（外部事件先被触发）</p></blockquote> <h4 id="window-event"><a href="#window-event" class="header-anchor">#</a> window.event</h4> <table><thead><tr><th>参数</th> <th>描述</th> <th>举例</th></tr></thead> <tbody><tr><td>screenX、screenY：</td> <td>鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要</td> <td></td></tr> <tr><td>clientX/clientY</td> <td>鼠标相对于整个视窗的左上角的位置</td> <td></td></tr> <tr><td>offsetX,offsetY \layerX,layerY</td> <td>鼠标相对于事件源（即鼠标所停留在的那个节点）的左上角的位置</td> <td>在 canvas 中绘制线条时，获取的鼠标 xy 坐标应当是基于 canvas 元素的左上角而不是整个屏幕的左上角</td></tr> <tr><td>x,y/pageX,pageY：</td> <td>检索相对于父元素鼠标水平坐标的整数；</td> <td></td></tr> <tr><td>altKey/shiftKey/ctrlKey</td> <td>对应的按键是否按下</td> <td></td></tr> <tr><td>type</td> <td>返回事件名，如点击就是‘click’</td> <td></td></tr> <tr><td>srcElement/target：</td> <td>事件源，就是发生事件的元素；</td> <td></td></tr> <tr><td>button：</td> <td>被按下的鼠标键，整数，1 代表左键，2 代表右键，4 代表中键，如果按下多个键，把这些值加起来，所以 3 就代表左右键同时按下</td> <td></td></tr></tbody></table> <p>keyCode：返回 keydown 何 keyup 事件发生的时候按键的代码，以及 keypress 事件的 Unicode 字符
fromElement,toElement|前者是指代 mouseover 事件中鼠标移动过的文档元素，后者指代 mouseout 事件中鼠标移动到的文档元素；
cancelBubble：|布尔，把它设置为 true 的时候，将停止事件进一步起泡到包容层次的元素；
returnValue：|布尔，设置为 false 的时候可以组织浏览器执行默认的事件动作；</p> <h3 id="属性"><a href="#属性" class="header-anchor">#</a> 属性</h3> <p>innerHTML 用于获取 DOM 元素内容或替换 DOM 元素内容。
innerText 用于获取 DOM 元素文本内容，若该 DOM 元素有多个子元素，该方法将会获取所有子元素的 innerText
style 返回 DOM 元素 style 属性的值。<code>用法：element.style.property = value</code>，如修改 display 属性为 none 来使元素隐藏</p> <h3 id="为一个-dom-添加事件的方法"><a href="#为一个-dom-添加事件的方法" class="header-anchor">#</a> 为一个 DOM 添加事件的方法</h3> <p>方法一：先找到该 DOM 元素，然后使用 addEventListener(event, function, useCapture) 方法</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>点我<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">fun</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//内部逻辑</span>
<span class="token punctuation">}</span>
target<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'button'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
target<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token function">fun</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><p>方法二：直接为 DOM 元素添加属性</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript"><span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>点我<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">fun</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//内部逻辑</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="js-中特殊的赋值"><a href="#js-中特殊的赋值" class="header-anchor">#</a> js 中特殊的赋值</h3> <p>=+ (特殊的赋值),表达式 A =+ B 表示：将 B 转化为数字赋值给 A。
(= 是赋值，+ 代表后面的数字为正数；同理，=- 代表后面的数字为负数。)</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//相当于告诉编译器，即将赋值的数值类型为数字类型，不要把数字当作字符串去拼接。</span>
<span class="token keyword">let</span> f<span class="token operator">=</span><span class="token string">&quot;10&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> g<span class="token punctuation">;</span>
g<span class="token operator">=</span><span class="token operator">-</span>f<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'g'</span><span class="token operator">:</span>g<span class="token punctuation">)</span>      <span class="token comment">// -10</span>
</code></pre></div><h3 id="js-计时事件"><a href="#js-计时事件" class="header-anchor">#</a> js 计时事件</h3> <p>setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 定时器</span>
<span class="token keyword">let</span> myvar <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token string">&quot;javascript function&quot;</span><span class="token punctuation">,</span> milliseconds<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//参数：js函数，毫秒</span>
window<span class="token punctuation">.</span><span class="token function">clearInterval</span><span class="token punctuation">(</span>intervalVariable<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//延时执行</span>
<span class="token keyword">let</span> myVar <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token string">&quot;javascript function&quot;</span><span class="token punctuation">,</span> milliseconds<span class="token punctuation">)</span><span class="token punctuation">;</span>

window<span class="token punctuation">.</span><span class="token function">clearTimeout</span><span class="token punctuation">(</span>timeoutVariable<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="jquery-异步请求"><a href="#jquery-异步请求" class="header-anchor">#</a> jquery 异步请求</h3> <div class="language-js extra-class"><pre class="language-js"><code>$<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&quot;POST&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;some.php&quot;</span><span class="token punctuation">,</span>               <span class="token comment">//请求地址</span>
  <span class="token literal-property property">async</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>                        <span class="token comment">//是否异步请求</span>
  <span class="token literal-property property">headers</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token literal-property property">Accept</span><span class="token operator">:</span><span class="token string">'application/json'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>             <span class="token comment">//设置请求头参数</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token string">&quot;name=John&amp;location=Boston&quot;</span><span class="token punctuation">,</span>     <span class="token comment">//对象类型数据，发送给服务器的数据</span>
  <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)</span><span class="token punctuation">{</span>            <span class="token comment">//请求成功后的回调函数</span>
    <span class="token function">alert</span><span class="token punctuation">(</span> msg <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token operator">...</span>                  <span class="token comment">//return语句只会结束success回调函数本身而不会终止ajax函数的执行</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre></div><h2 id="css3-transition-动画"><a href="#css3-transition-动画" class="header-anchor">#</a> css3-transition 动画</h2> <p>使用语法</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//transition: property duration timing-function delay;</span>
<span class="token comment">//property:none 	没有属性会获得过渡效果。</span>
<span class="token comment">//         all 	    所有属性都将获得过渡效果。</span>
<span class="token comment">//         property 	定义应用过渡效果的 CSS 属性名称列表</span>
</code></pre></div><h2 id="html-canvas-对象"><a href="#html-canvas-对象" class="header-anchor">#</a> HTML canvas 对象</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//绘制直线</span>
<span class="token keyword">function</span> <span class="token function">drawLine</span><span class="token punctuation">(</span><span class="token parameter">x1<span class="token punctuation">,</span> x2<span class="token punctuation">,</span> y1<span class="token punctuation">,</span> y2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  ctx<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建一条路径，</span>
  ctx<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span>x1<span class="token punctuation">,</span> y1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//定义线条开始坐标（将画笔移动到指定坐标（x,y））</span>
  ctx<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>x2<span class="token punctuation">,</span> y2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//定义线条结束坐标（）</span>
  ctx<span class="token punctuation">.</span>strokeStyle <span class="token operator">=</span> color<span class="token punctuation">;</span>
  ctx<span class="token punctuation">.</span>lineWidth <span class="token operator">=</span> size<span class="token punctuation">;</span>
  ctx<span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// lineWidth = size  设置线条宽度</span>
<span class="token comment">//strokeStyle = color 设置图形轮廓(线条)的颜色</span>
<span class="token comment">//fillStyle = color 设置图形的填充颜色</span>

<span class="token comment">//绘制圆形</span>
<span class="token keyword">function</span> <span class="token function">drawCircle</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  ctx<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">//以(x, y) 为圆心，以size为半径，从0到2pi绘制一个圆</span>
  ctx<span class="token punctuation">.</span><span class="token function">arc</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> size<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> color<span class="token punctuation">;</span>
  ctx<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//填充路径的内容区域生成实心的图形</span>
<span class="token punctuation">}</span>

<span class="token comment">//清除指定矩形内像素</span>
context<span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//x,y：要清除矩形的左上角的x坐标和y坐标</span>
<span class="token comment">//width,height：要清除矩形的宽度和高度</span>

<span class="token comment">//stroke() 	绘制已定义的路径。</span>
<span class="token comment">//fill()    填充当前绘图（路径）</span>
</code></pre></div><h2 id="一些杂项"><a href="#一些杂项" class="header-anchor">#</a> 一些杂项</h2> <h3 id="null-与-undefined-联系与区别"><a href="#null-与-undefined-联系与区别" class="header-anchor">#</a> null 与 undefined 联系与区别</h3> <p>共同点：都是原始类型，保存在栈中变量本地。</p> <p>不同点：
（1）undefined——表示变量声明过但并未赋过值。它是所有未赋值变量默认值
（2）null——表示一个变量将来可能指向一个对象。一般用于主动释放指向对象的引用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//值相等但类型不同</span>
<span class="token keyword">typeof</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
<span class="token keyword">typeof</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token comment">// object</span>
<span class="token keyword">null</span> <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
<span class="token keyword">null</span> <span class="token operator">==</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre></div><h3 id="typeof-、instanceof"><a href="#typeof-、instanceof" class="header-anchor">#</a> typeof 、instanceof</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//instanceof来检测某个对象是否是数组的实例</span>
<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token keyword">instanceof</span> <span class="token class-name">Array</span><span class="token punctuation">;</span> <span class="token comment">//true</span>
</code></pre></div><h3 id="js-中的基本和引用数据类型"><a href="#js-中的基本和引用数据类型" class="header-anchor">#</a> js 中的基本和引用数据类型</h3> <p>基本：（布尔、数字、字符串）、（Null、undefined、Symbol）</p> <h3 id="同步异步及代码执行顺序"><a href="#同步异步及代码执行顺序" class="header-anchor">#</a> 同步异步及代码执行顺序</h3> <blockquote><p>js 运行栈</p></blockquote> <blockquote><p>js 运行栈与任务队列</p></blockquote> <blockquote><p>js 事件循环
libuv 引擎中的事件循环分为 6 个阶段，它们会按照顺序反复运行。每当进入某一个阶段的时候，都会从对应的回调队列中取出函数去执行。当队列为空或者执行的回调函数数量到达系统设定的阈值，就会进入下一阶段。下面 是 Eventloop 事件循环的流程：</p></blockquote> <blockquote><p>整个流程分为六个阶段，当这六个阶段执行完一次之后，才可以算得上执行了一次 Eventloop 的循环过程。下面来看下这六个阶段都做了哪些事：
timers 阶段：执行 timer（setTimeout、setInterval）的回调，由 poll 阶段控制；
I/O callbacks 阶段：主要执行系统级别的回调函数，比如 TCP 连接失败的回调；
idle, prepare 阶段：仅 Node.js 内部使用，可以忽略；
poll 阶段： 轮询等待新的链接和请求等事件，执行 I/O 回调等；
check 阶段：执行 setImmediate() 的回调；
close callbacks 阶段：执行关闭请求的回调函数，比如 socket.on('close', ...)</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//setImmediate(func,...args)</span>
<span class="token comment">//要执行的函数，传入函数的参数</span>
<span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">setImmediate</span><span class="token punctuation">(</span>func<span class="token punctuation">,</span> <span class="token number">111</span><span class="token punctuation">,</span> <span class="token number">222</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">1000</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//上面代码的输出顺序为：11111....1115234</span>

<span class="token comment">//promise对象和async</span>
<span class="token keyword">let</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
p<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//上面代码输出结果：1   原因：调用resolve时执行then</span>
<span class="token keyword">let</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">&quot;hello world&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
p<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//上面代码输出结果：1 hello world</span>

axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//原理：将获取到的数据通过resolve传递出来，然后才能通过then获取到数据</span>

<span class="token comment">//async函数的返回值是Promise对象</span>
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*
 上面代码相当于：
function fun(){
  return new Promise((resolve)=&gt;{
    resolve(1)
  })
}
*/</span>
<span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//代码输出结果：1</span>

<span class="token comment">//await后面加promise对象就可以直接得到resolve的值</span>
<span class="token keyword">let</span> p1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> p2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> data1 <span class="token operator">=</span> <span class="token keyword">await</span> p1<span class="token punctuation">;</span>
  <span class="token keyword">let</span> data2 <span class="token operator">=</span> <span class="token keyword">await</span> p2<span class="token punctuation">;</span> <span class="token comment">//相当于执行p2.then()中的回调函数</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data1<span class="token punctuation">,</span> data2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//在await后执行的代码，也即在then()后执行。故可以看做是then()中执行的代码</span>
<span class="token punctuation">}</span>
<span class="token comment">//代码输出结果：1,2</span>
</code></pre></div><h4 id="await-原理"><a href="#await-原理" class="header-anchor">#</a> await 原理</h4> <p>从字面意思上看 await 就是等待，await 等待的是一个表达式，这个表达式的返回值可以是一个 promise 对象也可以是其他值。
await 是一个让出线程的标志。await 后面的表达式会先执行一遍，将 await 后面的代码加入到 microtask 中，然后就会跳出整个 async 函数来执行后面的代码。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">async1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;async1 start&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">await</span> <span class="token function">async2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;async1 end&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//相当于</span>
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">async1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;async1 start&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token function">async2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;async1 end&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="任务队列与运行栈"><a href="#任务队列与运行栈" class="header-anchor">#</a> 任务队列与运行栈</h4> <blockquote><p>更多信息见博文：https://zhuanlan.zhihu.com/p/575492528</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="代码执行顺序题目-1"><a href="#代码执行顺序题目-1" class="header-anchor">#</a> 代码执行顺序题目 1</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/*
1.同步程序
2.process.nectTick()
3.微任务：promise.then
4.宏任务：计时器、ajax、读取文件I/O、UI交互、setImmediate
5.setImmediate
*/</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//同步1</span>
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">async1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">await</span> <span class="token function">async2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//相当于promise.then    微任务5</span>
<span class="token punctuation">}</span>
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">async2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//同步2</span>
<span class="token punctuation">}</span>
<span class="token function">async1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//函数&gt;&gt;&gt;同步2</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//宏任务8</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//同步3</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//微任务6</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//微任务7</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//同步4</span>
<span class="token comment">//上面代码执行顺序：1</span>
</code></pre></div><h4 id="代码执行顺序题目-2"><a href="#代码执行顺序题目-2" class="header-anchor">#</a> 代码执行顺序题目 2</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">setImmediate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//宏任务7</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//同步1</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//宏任务6</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//同步2</span>
<span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//同步3</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//微任务5</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
process<span class="token punctuation">.</span><span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//nextTick4</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//上述代码执行顺序：2、5、6、8、7、3、1、4</span>
</code></pre></div><h4 id="代码执行顺序题目-3"><a href="#代码执行顺序题目-3" class="header-anchor">#</a> 代码执行顺序题目 3</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//请写出输出内容</span>
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">async1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;async1 start&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">await</span> <span class="token function">async2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;async1 end&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">async2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;async2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;script start&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;setTimeout&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">async1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;promise1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;promise2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;script end&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/*
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/</span>
</code></pre></div><h3 id="let、var、const"><a href="#let、var、const" class="header-anchor">#</a> let、var、const</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//const常用于定义不被修改的常量、对象、函数，如果尝试对const修饰的常量进行再定义或再赋值将会引发报错</span>
<span class="token keyword">const</span> <span class="token constant">PI</span> <span class="token operator">=</span> <span class="token number">3.14</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">fun</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">//let和var都可用于定义变量，但var定义的变量没有块作用域的概念，都是全局变量，let定义的变量有块作用域</span>
</code></pre></div><h2 id="解构、赋值、展开"><a href="#解构、赋值、展开" class="header-anchor">#</a> 解构、赋值、展开</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//数组的解构</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
<span class="token comment">//等价于</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">//数组解构赋值应用：调换两个变量的值</span>
<span class="token keyword">let</span> tmp<span class="token punctuation">;</span>
tmp <span class="token operator">=</span> a<span class="token punctuation">;</span>
a <span class="token operator">=</span> b<span class="token punctuation">;</span>
b <span class="token operator">=</span> tmp<span class="token punctuation">;</span>
<span class="token comment">//等价于</span>

<span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>b<span class="token punctuation">,</span> a<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//对象的解构赋值</span>
<span class="token keyword">let</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;1111&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
  <span class="token literal-property property">friend</span><span class="token operator">:</span> <span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">createObj</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">&quot;小明&quot;</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> friend <span class="token operator">=</span> <span class="token string">&quot;张三&quot;</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> name<span class="token punctuation">,</span>
    <span class="token literal-property property">age</span><span class="token operator">:</span> age<span class="token punctuation">,</span>
    <span class="token literal-property property">friend</span><span class="token operator">:</span> friend<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//需求：只想拿到一个对象的属性，es5只能先将这个对象定义出来，然后调用其属性obj.property</span>
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token function">createObj</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//es6使用对象解构</span>
<span class="token keyword">let</span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createObj</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//...args：展开语法，可以用于函数参数、对象属性和数组元素等场景，它的主要作用是展开和复制元素</span>
<span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b <span class="token operator">+</span> c<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>numbers<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1,2,3</span>
<span class="token function">sum</span><span class="token punctuation">(</span><span class="token operator">...</span>numbers<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将数组中的每个元素都展开作为独立参数传递给sum函数</span>
</code></pre></div><h2 id="函数相关"><a href="#函数相关" class="header-anchor">#</a> 函数相关</h2> <h3 id="形参与实参"><a href="#形参与实参" class="header-anchor">#</a> 形参与实参</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//ES5不支持传递默认参数值，如何为函数形参传递默认参数值</span>
<span class="token comment">// 方法一：或运算</span>
<span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> a <span class="token operator">=</span> arguments<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> b <span class="token operator">=</span> arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token number">2</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">+</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
<span class="token comment">// 方法二：if条件语句判断+typeof</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> arguments<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">!==</span> <span class="token string">&quot;undefined&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> a <span class="token operator">=</span> arguments<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">!==</span> <span class="token string">&quot;undefined&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> b <span class="token operator">=</span> arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//方法三：三元运算符</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token keyword">typeof</span> arguments<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">!==</span> <span class="token string">&quot;undefined&quot;</span> <span class="token operator">?</span> arguments<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token keyword">typeof</span> arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">!==</span> <span class="token string">&quot;undefined&quot;</span> <span class="token operator">?</span> arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">test1</span><span class="token punctuation">(</span><span class="token parameter">a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">test1</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//1,2</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//实参个数较多，默认值为undefined</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//1,undefined</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">(</span>
  <span class="token comment">//实参个数较少，自动忽略多余实参</span>
  <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//1,2</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="箭头函数与-this-指向"><a href="#箭头函数与-this-指向" class="header-anchor">#</a> 箭头函数与 this 指向</h3> <h2 id="类与继承"><a href="#类与继承" class="header-anchor">#</a> 类与继承</h2> <p>ES6 之前，生成实例对象的方法是通过构造函数</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//</span>
<span class="token keyword">class</span> <span class="token class-name">Cat</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">//constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。如果定义类时没有显式定义该函数，js引擎默认添加一个空的constructor()方法</span>
<span class="token keyword">let</span> cat <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cat</span><span class="token punctuation">(</span><span class="token string">&quot;小猫&quot;</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><code>类的属性和方法，除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Cat</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">eat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;吃鱼&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> cat <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cat</span><span class="token punctuation">(</span><span class="token string">&quot;小猫&quot;</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

cat<span class="token punctuation">.</span><span class="token function">eat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//吃鱼</span>

cat<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">&quot;name&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
cat<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">&quot;eat&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
cat<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">&quot;eat&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>

<span class="token comment">// 类的所有实例共享一个原型对象。</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cat<span class="token punctuation">.</span>__proto__ <span class="token operator">===</span> <span class="token class-name">Cat</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token class-name">Cat</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>__proto__ <span class="token operator">===</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//true</span>
</code></pre></div><h3 id="类的继承"><a href="#类的继承" class="header-anchor">#</a> 类的继承</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//Class通过extends关键字实现继承，让子类继承父类的属性和方法</span>
<span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">username<span class="token punctuation">,</span> password</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>username <span class="token operator">=</span> username<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>password <span class="token operator">=</span> password<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">login</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;登录&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Admin</span> <span class="token keyword">extends</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">username<span class="token punctuation">,</span> password<span class="token punctuation">,</span> is_admin</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span>username<span class="token punctuation">,</span> password<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 调用父类的constructor()</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>is_admin <span class="token operator">=</span> is_admin<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">deletePerson</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;删除用户&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>es5 和 es6 继承机制的不同之处
ES5 的继承机制，是先创造一个独立的子类的实例对象，然后再将父类的方法添加到这个对象上面，即“实例在前，继承在后”。
ES6 的继承机制，是先将父类的属性和方法，加到一个空的对象上面，然后再将该对象作为子类的实例，即“继承在前，实例在后”。所以子类的 constructor()构造函数在使用 this 之前，必须先调用 super()通过父类的构造函数完成 this 对象的塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。
这意味着创建子类的实例对象之前，父类的构造函数一定会先运行一次</li></ul> <h3 id="原型链的理解"><a href="#原型链的理解" class="header-anchor">#</a> 原型链的理解</h3> <h2 id="原型对象"><a href="#原型对象" class="header-anchor">#</a> 原型对象</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//  每个对象都有自己的原型对象，可以使用自己原型对象的所有属性和方法</span>
<span class="token comment">//  获取原型对象的方法，</span>
<span class="token comment">//法一：通过对象的__proto__属性获取</span>
<span class="token keyword">let</span> cat <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;小猫&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
cat<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span><span class="token function-variable function">eat</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;吃鱼&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
cat<span class="token punctuation">.</span><span class="token function">eat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//法二：通过构造函数的prototype属性拿到原型对象</span>
<span class="token keyword">function</span> <span class="token function">Cat</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token class-name">Cat</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">eat</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;吃鱼&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> cat <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
cat<span class="token punctuation">.</span><span class="token function">eat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//原型对象的应用:通过构造函数的prototype属性拿到原型对象</span>
<span class="token keyword">let</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">Date</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">formate</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> year <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> month <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> date <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>year<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">年</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>month<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">月</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>date<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">日</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">//需求：任何一个date实例对象都可以调用formate方法输出当前：年月日，如2023年12月21日</span>
date<span class="token punctuation">.</span><span class="token function">formate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="闭包"><a href="#闭包" class="header-anchor">#</a> 闭包</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//概念：函数嵌套函数，内部函数即闭包</span>
<span class="token comment">//作用域链，嵌套函数使用的变量会在当前作用域中找，如果没有再找上一层函数作用域中的同名变量，...（一层向上找，直到找到全局环境，如果还没有找到就报错undefined</span>

<span class="token comment">//正常情况下，函数执行完毕，内部变量销毁，释放内存空间</span>
<span class="token comment">//特性：内部函数没有执行完成、外部函数变量不会被销毁</span>
<span class="token keyword">function</span> <span class="token function">outerFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">function</span> <span class="token function">innerFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> innerFn<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> f <span class="token operator">=</span> <span class="token function">outerFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//此处相当于将内部函数赋值给了f，外部函数已经执行完毕，但其作用域内变量不会被销毁</span>
<span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//10</span>

<span class="token comment">//作用：封装一段代码,模块实现化</span>
<span class="token comment">//下面一段代码实现简单的功能，但是引入了两个全局变量和两个全局函数，可能会造成命名冲突等诸多问题</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">sub</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">-</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

result1 <span class="token operator">=</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
result2 <span class="token operator">=</span> <span class="token function">sub</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//尝试进行封装</span>
<span class="token comment">//使用自执行函数，声明的时候直接调用</span>
<span class="token keyword">let</span> module <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
  <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">function</span> <span class="token function">sub</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> a <span class="token operator">-</span> b<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">add</span><span class="token operator">:</span> add<span class="token punctuation">,</span>
    <span class="token literal-property property">sub</span><span class="token operator">:</span> sub<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
result1 <span class="token operator">=</span> module<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
result2 <span class="token operator">=</span> module<span class="token punctuation">.</span><span class="token function">sub</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//自执行函数：函数表达式可以 &quot;自调用&quot;。如果表达式后面紧跟 () ，则会自动调用。通过添加括号，来说明它是一个函数表达式：</span>
</code></pre></div><h2 id="js-内存结构与深浅拷贝"><a href="#js-内存结构与深浅拷贝" class="header-anchor">#</a> js 内存结构与深浅拷贝</h2> <p>堆内存：用来存储所有 JavaScript 对象的内存区域。这个区域包含了许多不同类型的对象，比如数组、字符串、正则表达式、函数等。每个对象在堆中都有一个独立的空间，包含了该对象的所有属性和方法。</p> <p>栈内存：主要用于存储基本数据类型（如字符串、数字、布尔值等）和函数调用。当创建一个变量或函数被调用时，就会在栈上分配内存。</p> <h3 id="浅拷贝"><a href="#浅拷贝" class="header-anchor">#</a> 浅拷贝</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;小明&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> a<span class="token punctuation">;</span>
a<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;小刚&quot;</span><span class="token punctuation">;</span>
cosonle<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>name<span class="token punctuation">,</span> b<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//小刚，小刚</span>

<span class="token comment">//浅拷贝：原始类型直接拷贝，引用类型无法拷贝</span>
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;小明&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> newObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  newObj<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//浅拷贝的封装</span>
<span class="token keyword">function</span> <span class="token function">copy</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> newObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    newObj<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> newObj<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> newObject <span class="token operator">=</span> <span class="token function">copy</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.bootcdn.net/ajax/libs/vue/2.2.0/vue.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">@submit.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>insert<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>student.name<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>student.age<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>添加<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>姓名：{{item.name}} 年龄：{{item.age}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">&quot;#app&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">student</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token function">insert</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>
              <span class="token comment">// this.student</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">copy</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>student<span class="token punctuation">)</span> <span class="token comment">//传进来浅拷贝对象</span>
            <span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token function">copy</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">let</span> newObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span>
              newObj<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">return</span> newObj<span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="json-对象深拷贝"><a href="#json-对象深拷贝" class="header-anchor">#</a> JSON 对象深拷贝</h3> <p>JSON，全称 JavaScript Object Notation，即 javascript 对象表示法</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//JSON.parse()：	用于将一个 JSON 字符串转换为 JavaScript 对象。</span>
<span class="token comment">//JSON.stringify()：用于将 JavaScript 值转换为 JSON 字符串。</span>
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;小明&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  <span class="token literal-property property">girlfriend</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;小花&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> json_str <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>json_str<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//{&quot;name&quot;:&quot;小明&quot;,&quot;age&quot;:10,&quot;girlfriend&quot;:{&quot;name&quot;:&quot;小花&quot;}}</span>

<span class="token comment">//深拷贝函数的封装</span>
<span class="token keyword">function</span> <span class="token function">deep_copy</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> json_str <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> newObj <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>json_str<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> newObj<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> newObj <span class="token operator">=</span> <span class="token function">deep_copy</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;小刚&quot;</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="回调地狱与-promise-对象"><a href="#回调地狱与-promise-对象" class="header-anchor">#</a> 回调地狱与 Promise 对象</h2> <p>想要拿数据，但是数据是异步的，不能使用 return，只能使用回调函数获取，但是还想要控制顺序，只能进行回调函数的嵌套，嵌套的层数多了代码就难以维护</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//获取奶茶</span>
<span class="token keyword">function</span> <span class="token function">getTea</span><span class="token punctuation">(</span><span class="token parameter">fn</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">fn</span><span class="token punctuation">(</span><span class="token string">&quot;奶茶&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//获取火锅</span>
<span class="token keyword">function</span> <span class="token function">getHotpot</span><span class="token punctuation">(</span><span class="token parameter">fn</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">fn</span><span class="token punctuation">(</span><span class="token string">&quot;火锅&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">getTea</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">getHotpot</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//虽然火锅做得慢，但是必须要先获得火锅再喝奶茶</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">getMoive</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">//喝完奶茶再看个电影,.....,由于事件的发生顺序固定和回调函数的特性，必须进行嵌套</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//Promise对象</span>
<span class="token keyword">let</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">&quot;hell world&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//</span>
p<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//改写</span>
<span class="token keyword">function</span> <span class="token function">getTea</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">&quot;奶茶&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">getHotPot</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">&quot;火锅&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//先吃火锅再喝奶茶</span>
<span class="token function">getHotPot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">getTea</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="异步请求"><a href="#异步请求" class="header-anchor">#</a> 异步请求</h2> <h3 id="xmlhttpreauest-对象及其封装"><a href="#xmlhttpreauest-对象及其封装" class="header-anchor">#</a> XMLHttpReauest 对象及其封装</h3> <table><thead><tr><th>属性</th> <th>描述</th> <th></th></tr></thead> <tbody><tr><td>readyState</td> <td>本次请求状态</td> <td></td></tr> <tr><td>status</td> <td>本次请求的 HTTP 状态码</td> <td></td></tr> <tr><td>responseBody</td> <td>服务器返回内容的正文</td> <td></td></tr> <tr><td>responseText</td> <td>以字符串形式返回响应信息</td> <td></td></tr> <tr><td>responseXML</td> <td>以 XML 数据形式返回响应信息</td> <td></td></tr></tbody></table> <blockquote><p>readyState 状态
0：尚未初始化（没有调用 open()方法）
1：没有调用 send()方法，
2：send()方法已经调用，未得到服务器返回，
3：接收了部分服务器数据，
4：接收了全部服务器数据，本次请求完全结束</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/*
实例化xmlhttprequest对象
通过open()方法打开服务器url地址
注册onreadystatechange事件处理函数
调用send()方法发送请求
*/</span>
<span class="token keyword">let</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">&quot;get&quot;</span><span class="token punctuation">,</span> url<span class="token punctuation">)</span><span class="token punctuation">;</span>
xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">===</span> <span class="token number">4</span> <span class="token operator">&amp;&amp;</span> xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//业务代码</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//open()方法</span>
<span class="token comment">//open(method,url,async)    规定请求的类型，URL，请求是否应该进行异步处理。</span>

<span class="token comment">// 初步封装：采用回调函数</span>
<span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token function">myajax</span><span class="token punctuation">(</span><span class="token string">&quot;get&quot;</span><span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">alert</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">myajax</span><span class="token punctuation">(</span><span class="token parameter">method<span class="token punctuation">,</span> url<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>method<span class="token punctuation">,</span> url<span class="token punctuation">)</span><span class="token punctuation">;</span>
  xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">===</span> <span class="token number">4</span> <span class="token operator">&amp;&amp;</span> xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">//业务代码</span>
      <span class="token comment">//return xhr.responseText 不能使用return返回异步请求内容</span>
      <span class="token function">next</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//再次封装：采用promise对象</span>
<span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token function">myajax</span><span class="token punctuation">(</span><span class="token string">&quot;get&quot;</span><span class="token punctuation">,</span> url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">alert</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">myajax</span><span class="token punctuation">(</span><span class="token parameter">method<span class="token punctuation">,</span> url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>method<span class="token punctuation">,</span> url<span class="token punctuation">)</span><span class="token punctuation">;</span>
    xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">===</span> <span class="token number">4</span> <span class="token operator">&amp;&amp;</span> xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">//业务代码</span>
        <span class="token comment">//return xhr.responseText 不能使用return返回异步请求内容</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/awesome-notebook/assets/js/app.5520c9b0.js" defer></script><script src="/awesome-notebook/assets/js/2.778bb4ad.js" defer></script><script src="/awesome-notebook/assets/js/1.50b457b8.js" defer></script><script src="/awesome-notebook/assets/js/26.9422829f.js" defer></script>
  </body>
</html>
